<template>
    <view class="xilu">
        <view class="container">
            <!--  -->
            <view class="xilu_classic_list fs32 col89">
                <view :class="classicIndex == index?'active':''" class="xilu_class_item" v-for="(item,index) in classList" @click="changeList(index)">{{item.name}}</view>
            </view>
            <view class="flex-grow-1">
                <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :fixed="false">
                    <!--  -->
                    <view class="xilu_goods_item" v-for="(item,index) in orderList">
                        <view @click="bindDetail(item.id)">
                            <view class="flex-box">
                                <view class="fs28 col89 flex-grow-1">订单号 {{item.order_no}}</view>
                                <view :class="[item.state==0?'red':(item.state==1?'lightblue':(item.state==2?'col10':'col5'))]">{{item.state_text}}</view>
                            </view>

                            <view class="flex-box pt15 pb25" v-for="(product,index) in item.order_product">
                                <image :src="product.image" mode="aspectFill" class="xilu_pic"></image>
                                <view class="flex-grow-1">
                                    <view class="fs30 pb15 col10 m-ellipsis">{{product.product_name}}</view>
                                    <view class="fs34 pb15"><text class="fs24">¥</text>{{product.product_price}}</view>
                                    <view class="tr red fs40">
                                        <text class="fs30 col5">合计：</text>
                                        <text class="fs24">¥</text>
                                        <text class="fwb">{{product.sum_price}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="flex-box">
                            <view class="flex-grow-1">
                                <view class="flex-box pb5">
                                    <image :src="item.user.avatar" class="xilu_avatar" mode="aspectFill">
                                    </image>
                                    <view class="fs28 blue m-ellipsis flex-grow-1">{{item.user.nickname}}</view>
                                </view>
								<view class="fs24 red" v-if="item.state==0 && item.expiretime_text">请在{{item.expiretime_text}}前付款</view>
                            </view>
                            <view class="btn2" @click="bindLogistics(item.id)" v-if="item.order_type==1&&item.state==2">查看物流</view>
                            <!-- <view class="btn1" v-if="item.state==0">修改价格</view> -->
                            <!-- <view class="btn1"  v-if="item.state==2">确认收货</view> -->
                            <view class="btn1" v-if="item.state==1" @click.stop="bindFreightToggle(index)">去发货</view>
                        </view>
                    </view>
                </mescroll-uni>
            </view>
        </view>
        <u-popup :show="sendGoodsPop" mode="center" :closeable="true" closeOnClickOverlay @close="sendGoodsPop = false" round="20rpx">
            <view class="sendGoods">
                <view class="fs34 col3 fwb tc pb40">去发货</view>
                <view class="picker_box plr40 flex-box mb30">
                    <view class="fs30 col5">物流公司</view>
                    <view class="flex-grow-1 pr30 tr m-arrow-right">
                        <multi-select :items="expressCompany" @change="bindCompanyChange" id_key="id" name_key="name" children_key="childlist" :value="express_company_id" ref="pickers">
                            <view class="inp_item flex-box ">
                                <view class="flex-grow-1 fs30" v-if="!selectedExpress">请选择</view>
                                <view class="flex-grow-1 fs30 col1" v-else> {{selectedExpress.name}}
                                </view>
                                </image>
                            </view>
                        </multi-select>
                    </view>
                </view>
                <view class="picker_box plr40 flex-box">
                    <view class="fs30 col5">物流单号</view>
                    <input type="text" class="flex-grow-1 tr" v-model="express_no" placeholder="请输入" placeholder-class="col0" />
                </view>
                <view class="btn" @click="bindFreight()">确定提交</view>
            </view>
        </u-popup>
		<u-popup :show="sendGoodsPop2" mode="center" closeable closeOnClickOverlay @close="sendGoodsPop2 = false" round="20rpx">
		    <view class="refuse_pop">
		        <view class="fs34 col3 fwb tc pb40">自提地址</view>
		        <textarea class="textarea" cols="30" v-model="address" rows="10"></textarea>
		        <view class="btn" @click="bindAddress()">确定提交</view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import multiSelect from '@/components/multi-select/multi-select.vue';
    var validate = require("../../xilu/validate.js");
    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {
            multiSelect
        },
        data() {
            return {
                classList: [{
                    id: 0,
                    name: "全部"
                }, {
                    id: 1,
                    name: "待付款"
                }, {
                    id: 2,
                    name: "待发货"
                }, {
                    id: 3,
                    name: "待收货"
                }, {
                    id: 4,
                    name: "待评价"
                }, {
                    id: 5,
                    name: "已完成"
                }, {
                    id: 6,
                    name: "退款中"
                }],
                classicIndex: 0,
                upOption: {
                    bgColor: "#f7f9fc",
                    textColor: "#aaa"
                },
                orderList: [],
                expressCompany: [],
                selectedExpress: null,
                chooseIndex: 0,
                sendGoodsPop: false, //弹窗
				sendGoodsPop2: false,
                express_company_id: 0,
                express_no: '',
				address:''
            };
        },
        methods: {
            changeList(index) {
                this.classicIndex = index;
                this.mescroll.resetUpScroll();
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let state = this.classList[this.classicIndex].id;
                this.$core.get({
                    url: 'xilumarket.order/sale_lists',
                    loading: false,
                    data: {
                        state: state,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)

                        //设置列表数据
                        if (page.num == 1) this.orderList = []; //如果是第一页需手动置空列表
                        this.orderList = this.orderList.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })
            },
			//发货
			bindFreightToggle(index){
				if(this.orderList[index].order_type == 2){
					this.chooseIndex = index;
					this.sendGoodsPop2 = true;
				}else{
					this.$core.post({url: 'xilumarket.order/express_company',data: {},loading: true,success: ret => {
						this.chooseIndex = index;
						this.sendGoodsPop = true;
						this.expressCompany = ret.data
					}
					})
				}
				
			},
			//详情
			bindDetail(id){
				uni.navigateTo({
					url: '/pages/order_detail/order_detail?id='+id
				});
			},
			//物流公司
			bindCompanyChange(e) {
				let index = e.indexValues;
				this.express_company_id = this.expressCompany[index[0]].id;
				this.selectedExpress = {
					id: this.express_company_id,
					'name': this.expressCompany[index[0]].name
				};
			},
			bindFreight(){
				let page = this;
				let order = this.orderList[this.chooseIndex];
				if(order.state != 1){
					uni.showToast({title: '当前商品不可发货',icon:'none'});
					return false;
				}
				
				let data = {
					order_id: order.id,
					express_company_id: this.express_company_id,
					express_no: this.express_no
				}
				var rule = [
					{name: 'order_id',nameChn: '订单',rules: ['require','gt:0'],errorMsg: {require: '订单错误',gt: '订单错误'},},
					{name: 'express_company_id',nameChn: '物流公司',rules: ['require','gt:0'],errorMsg: {require: '请选择物流公司',gt: "请选择物流公司"},},
					{name: 'express_no',nameChn: '物流单号',rules: ['require'],errorMsg: {require: '请填写物流单号'},},
					];
				if(!validate.check(data,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url: 'xilumarket.order/send_freight',data: data,loading: true,success: ret => {
					uni.showToast({
						title:"发货成功"
					})
					this.orderList[this.chooseIndex] = ret.data;
					this.selectedExpress = null;
					this.sendGoodsPop = false;
					this.express_company_id = 0;
					this.express_no = '';
					this.chooseIndex = '';
				},fail: err => {
					uni.showModal({
						title:'提示',
						content: err.msg,
						showCancel: false,
						success() {
							page.selectedExpress = null;
							page.sendGoodsPop = false;
							page.express_company_id = 0;
							page.express_no = '';
							page.chooseIndex = '';
						}
					})
					return false;
				}
				});
			},
			//自提发货
			bindAddress(){
				let page = this;
				let order = this.orderList[this.chooseIndex];
				if(order.state != 1){
					uni.showToast({title: '当前商品不可发货',icon:'none'});
					return false;
				}
				
				let data = {
					order_id: order.id,
					address: this.address
				}
				var rule = [
					{name: 'order_id',nameChn: '订单',rules: ['require','gt:0'],errorMsg: {require: '订单错误',gt: '订单错误'},},
					{name: 'address',nameChn: '自提地址',rules: ['require'],errorMsg: {require: '请填写自提地址'},},
					];
				if(!validate.check(data,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url: 'xilumarket.order/send_address',data: data,loading: true,success: ret => {
					uni.showToast({
						title:"发货成功"
					})
					this.orderList[this.chooseIndex] = ret.data;
					this.sendGoodsPop2 = false;
					this.address = '';
					this.chooseIndex = '';
				},fail: err => {
					uni.showModal({
						title:'提示',
						content: err.msg,
						showCancel: false,
						success() {
							page.sendGoodsPop2 = false;
							page.address = '';
							page.chooseIndex = '';
						}
					})
					return false;
				}
				});
			},
			//物流
			bindLogistics(orderId){
				uni.navigateTo({
					url: '/pages/logistics/logistics?order_id='+orderId
				})
			}
			
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            background-color: #f7f9fc;
            height: 100vh;
            display: flex;
            flex-direction: column;
            width: 100vw;
        }

        &_classic_list {
            padding: 30rpx 0;
            width: 100vw;
            overflow-x: scroll;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        &_class_item {
            display: inline-block;
            margin-left: 50rpx;

            &.active {
                font-size: 32rpx;
                color: #101010;
                position: relative;

                &::after {
                    display: block;
                    content: "";
                    width: 31rpx;
                    height: 13rpx;
                    background: url(@/static/icon/index_active.png) no-repeat center;
                    background-size: 100%;
                    position: absolute;
                    bottom: -16rpx;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
            }

            &:first-child {
                margin-left: 30rpx;
            }
            &:last-child {
                margin-right: 30rpx;
            }
        }

        &_goods_item {
            background-color: #fff;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 30rpx;
        }

        &_pic {
            width: 150rpx;
            height: 150rpx;
            margin-right: 30rpx;
            border-radius: 10rpx;
        }

        &_avatar {
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
            margin-right: 20rpx;

        }

        .btn1,
        .btn2 {
            width: 150rpx;
            height: 65rpx;
            line-height: 65rpx;
            font-size: 24rpx;
        }
		
		.refuse_pop {
		    padding: 50rpx 40rpx 30rpx;
		
		    .textarea {
		        width: 570rpx;
		        height: 280rpx;
		        background: #F7F9FC;
		        border-radius: 20rpx;
		    }
		
		    .btn {
		        width: 500rpx;
		        height: 100rpx;
		        line-height: 100rpx;
		        background: #FFC100;
		        border-radius: 50rpx;
		        text-align: center;
		        margin: 36rpx auto 0;
		    }
		}
		

        .sendGoods {
            padding: 50rpx 30rpx 56rpx;

            .picker_box {
                width: 570rpx;
                height: 100rpx;
                background: #F7F9FC;
                border-radius: 55rpx;
            }

            .btn {
                width: 500rpx;
                height: 100rpx;
                background: #FFC100;
                border-radius: 50rpx;
                line-height: 100rpx;
                text-align: center;
                margin: 40rpx auto 0;
                font-size: 30rpx;
                color: #101010;
            }
        }


    }
</style>